
<style>
	label.error {
		color: #ff0000;
		font-size: italic;
		font-weight: bold;
	}
</style>

<div class="container">
	<div class="demo-row">
		<h2 class="text-success text-center">Update Information</h2>
		 <div class="alert alert-info" ng-show="error">{{errorMessage}}</div>
                                        
		  <div class="alert alert-info" ng-show="listUsers.length == 0">
                                No User found
          </div>
		<table class="table table-striped table-bordered table-hover" datatable="ng" ng-show="listUsers.length > 0">
			 <thead>
				 <tr>
				 	<th><span class="fui-user"></span>Login Id</th>
				 	<th>ID Card Number</th>
				 	<th>First Name</th>
				 	<th>Last Name</th>
				 	<th>Phone 1</th>
				 	<th>Address 1</th>
				 	<th>Email 1</th>
				 	<th>Detail</th>
				 <tr>
			 </thead>
			 <tbody>
			 	
			 		<tr ng-repeat="user in listUsers">
			 			<td> <span class="fui-user"></span>{{user.loginId}}</td>
			 			<td>{{user.cardnumberid}}</td>
			 			<td>{{user.firstname}}</td>
			 			<td>{{user.lastname}}</td>
			 			<td>{{user.phone1}}</td>
			 			<td>{{user.address1}}</td>
			 			<td>{{user.email1}}</td>
			 			<td><button class="btn btn-success" ng-click="openInfo(user.loginId)"><span class="fui-new"></span>Edit</button></td>
			 		</tr>
			 	
			 </tbody>
		</table>
	</div>
</div>

 <script type="text/ng-template" id="update.html">
        <div class="modal-header">
            <h3 class="modal-title">Detail User</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" role="form" ng-submit="updateUser(user)"  j-validate-update>
                    <div class="form-group" >
				     <label for="inputLoginId" class="col-sm-3 control-label">Avatar</label>
				     <div class="col-sm-9">
				            <img height="200" width="200" ng-src="{{user.image}}">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputLoginId" class="col-sm-3 control-label">Login Id</label>
				    <div class="col-sm-9">
				      <input readonly="true" ng-model="user.loginId" name="loginId" id="loginId" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword" class="col-sm-3 control-label">Password</label>
				    <div class="col-sm-9">
				      <input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="New Password" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword" class="col-sm-3 control-label">Password Again</label>
				    <div class="col-sm-9">
				      <input type="password" name="password_again" class="form-control" placeholder="New Password Again" >
				    </div>
				  </div>
				   <div class="form-group">
				    <label for="inputIdCardNumber" class="col-sm-3 control-label">Id Card Number</label>
				    <div class="col-sm-9">
				      <input ng-model="user.cardnumberid" name="cardnumberid" id="cardnumberid" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputFirstName" class="col-sm-3 control-label">First Name</label>
				    <div class="col-sm-9">
				      <input ng-model="user.firstname" name="firstname" id="firstname" class="form-control" />
				    </div>
				  </div>
				   <div class="form-group">
				    <label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
				    <div class="col-sm-9">
				      <input ng-model="user.lastname" name="lastname" id="lastname" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputMiddleName" class="col-sm-3 control-label">Middle Name</label>
				    <div class="col-sm-9">
				      <input ng-model="user.midname" name="midname" id="midname" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPhone1" class="col-sm-3 control-label">Phone 1 *</label>
				    <div class="col-sm-9">
				      <input ng-model="user.phone1" name="phone1" id="phone1" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPhone2" class="col-sm-3 control-label">Phone 2</label>
				    <div class="col-sm-9">
				      <input ng-model="user.phone2" name="phone2" id="phone2" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputAddress1" class="col-sm-3 control-label">Address 1*</label>
				    <div class="col-sm-9">
				      <input ng-model="user.address1" name="address1" id="address1" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputAddress2" class="col-sm-3 control-label">Address 2</label>
				    <div class="col-sm-9">
				      <input ng-model="user.address2" name="address2" id="address2" class="form-control"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputEmail1" class="col-sm-3 control-label">Email 1*</label>
				    <div class="col-sm-9">
				      <input ng-model="user.email1" name="email1" id="email1" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputEmail2" class="col-sm-3 control-label">Email 2</label>
				    <div class="col-sm-9">
				      <input ng-model="user.email2" name="email2" id="email2" class="form-control" />
				    </div>
				  </div>
				  <div class="form-group">
				   	<label for="inputAvatar" class="col-sm-3 control-label">Uploading</label>
				  	 <div class="progress col-sm-9">
		                     <div class="progress-bar" ng-style="{width : ( percent + '%' ) }"></div>
		             </div>
				  </div>
				  <div class="form-group">
				    <label for="inputAvatar" class="col-sm-3 control-label">New Avatar</label>
				    <div class="col-sm-9">
				    	<input type="file" class="filestyle" ng-file-select="onFileSelect($files)" data-buttonName="btn-primary" />
				    </div>
				  </div>
				  <div class="form-group"  ng-show="dataUrls['image']">
				     <label for="inputLoginId" class="col-sm-3 control-label">Preview</label>
				     <div class="col-sm-9">
				            <img height="300" width="300" ng-src="{{dataUrls['image']}}">
				    </div>
				  </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="updateUser(user)">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
 </script>
 
